<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 项目进度照片收集编辑 -->
    <a-form-model
      ref="ruleForm"
      :model="form"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      :rules="editModel != 0 ? rules : {}"
    >
      <a-spin :spinning="loading">
        <!-- 表格 -->
        <a-card :bordered="false">
          <title-name title="项目基本信息"></title-name>
          <custom-form :formList="formList" :form="form" :editModel="editModel == 0 ? 'V' : ''"
          @selectOrg="selectOrg">
            <!-- 照片 -->
            <template #fileList>
              <div v-if="editModel == 0 && (!form.fileList || form.fileList.length < 1)" style="margin-top: -3px">
                无
              </div>
              <l-table
                v-else
                uploadType="image"
                businessCode="OF04"
                :disabled="editModel == 0"
                :editModel="editModel"
                :uploadArrys.sync="form.fileList"
                multiple
              ></l-table>
              <div v-if="editModel != 0" class="file_prompt">需上传建筑全景照片</div>
            </template>
          </custom-form>
        </a-card>
      </a-spin>
      <!-- 页脚操作栏 -->
      <div class="btn_box page-btn-right-top">
        <a-button :loading="loading" v-if="editModel != 0" type="primary" class="button_right" @click="handleSubmit"
          >提交</a-button
        >
        <a-button type="primary" @click="handleActiveClose">关闭</a-button>
      </div>
    </a-form-model>
  </base-breadcrumb>
</template>

<script>
import { projectImagesCollect } from '@/api/office/office/enterpriseHonorAndImgCollect' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import SelectProject from '@/components/Select/SelectProject' // 项目名称

export default {
  extends: new BaseEditPage(),
  data() {
    return {
      loading: false, // 加载控件
      editModel: 0, // 操作状态:0 查看;1 编辑;2 新增
      form: {
        viewName: ""
      }, // 表单
      rules: {
        projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
        constructionStage: [{ required: true,whitespace:true, message: '请输入施工阶段', trigger: 'change' }],
        photographTime: [{ required: true, message: '请选择拍摄时间', trigger: 'change' }],
        photographPlace: [{ required: true,whitespace:true, message: '请输入拍摄地点', trigger: 'change' }],
        photographPerson: [{ required: true,whitespace:true, message: '请输入拍摄人 ', trigger: 'change' }],
        photographExplain: [{ required: true,whitespace:true, message: '请输入说明 ', trigger: 'change' }],
        fileList: [{ type: 'array', required: true, message: '请上传照片', trigger: 'blur' }],
      }, // 校验规则
      init: false, // 初始化控件
      post:{} // 当前岗位信息
    }
  },
  watch: {
    // 监听附件图片实现附件校验
    'form.fileList'() {
      if (this.editModel != 0 && this.init) {
        this.$nextTick(() => {
          this.$refs.ruleForm?.validateField('fileList')
        })
      }
    },
  },
  mounted() {
    this.$route.meta.title = ['项目进度照片收集查看', '项目进度照片收集编辑', '项目进度照片收集新增'][this.editModel]
    // 初始化岗位信息
    // if(sessionStorage.getItem('ycloud-user_info')){
    //   this.post = JSON.parse(sessionStorage.getItem('ycloud-user_info')).currentPost
    // }
    // 不为添加时请求详情
    if (this.editModel != 2) {
      this.loading = true
      projectImagesCollect.detail(this.id)
        .then((res) => {
          this.loading = false
          res.data.isTransferName = res.data.isTransfer ? '是' : '否'
          this.form = res.data
          this.form.viewName = this.form.branchComName+"/"+this.form.projectName
          this.formCode = res.data.formCode
          this.$nextTick(() => {
            this.init = true
          })
        })
        .catch(() => {
          this.loading = false
        })
    } else {
      // this.$nextTick(() => {
      //   this.$set(this.form,'branchComId',this.post.orgId)
      //   this.$set(this.form,'branchComName',this.post.orgName)
      //   this.init = true
      // })
    }
  },
  computed: {
    formList() {
      return [
        // {
        //   type: 'a-input',
        //   keyName: 'branchComName',
        //   disabled: true,
        //   label: '分公司',
        // },
        // {
        //   type: SelectProject,
        //   keyName: 'projectId',
        //   label: '项目名称',
        //   viewName: 'projectName',
        //   attrs: {
        //     autoSelected: this.editModel == 2,
        //     keyValue: 'branchComId',
        //     isClear: this.editModel == 2,
        //     form: this.form,
        //   },
        // },
        {
          label: '所属单位',
          type: 'orgTree',
          keyName: 'projectId',
          rules: [{ required: true, message: '请选择所属单位', trigger: 'change' }],
          span: 16,
          isAutoSelectFirst:this.editModel == 2,
          isNeedAuth:true,
          checkStrictly: true,
          isQueryProjecDetail: false,
          viewName: "viewName",
          isNoBorder: this.editModel == 0
        },
        {
          keyName: 'constructionStage',
          type: 'a-input',
          label: '施工阶段',
        },
        {
          keyName: 'photographTime',
          type: 'a-date-picker',
          placeholder: '请选择日期',
          label: '拍摄时间',
          attrs: {
            valueFormat: 'YYYY-MM-DD',
          },
        },
        {
          keyName: 'photographPlace',
          type: 'BaseInput',
          label: '拍摄地点',
        },
        {
          keyName: 'photographPerson',
          type: 'BaseInput',
          label: '拍摄人',
        },
        {
          keyName: 'photographExplain',
          type: 'BaseTextarea',
          label: '说明',
          span: 24,
        },
        {
          slot: true,
          keyName: 'fileList',
          label: '照片',
          span: 24,
        },
      ]
    },
  },
  methods: {
    selectOrg(val) {
      if(val.length) {
        this.form.branchComName = val[val.length-2].orgName
        this.form.branchComId = val[val.length-2].orgId
      }
    },
    /**
     * 提交表单
     */
    handleSubmit() {
      let that = this
      // 校验表单
      that.$refs.ruleForm.validate((e) => {
        let api = ['update', 'create'][that.editModel - 1] // 根据操作切换url地址
        if (e) {
          // 提交表单
          that.loading = true
          let form = that.$clone(that.form)
          // 格式化文件list为id集合
          form.fileListIds = form.fileList.map(item=>item.commonId)
          // 删除多余文件list
          delete form.fileList
          projectImagesCollect[api](form)
            .then(() => {
              that.loading = false
              that.$message.success('提交成功！')
              that.$multiTab.close()
            })
            .catch(() => {
              that.loading = false
            })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-form-item {
  .ant-form-item-label {
    height: 28px;
    width: 200px;
    line-height: 22px;
    padding: 6px 4px 0 0;
    text-align: right;
    white-space: pre-wrap;
    overflow: visible;
  }
  .ant-form-item-control-wrapper {
    width: calc(100% - 200px);
  }
}
.file_prompt {
  color: #999;
}
</style>